import { Snackbar as MuiSnackbar, Slide, SlideProps, SnackbarCloseReason } from '@mui/material';
import classNames from 'classnames';
import { SyntheticEvent } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../redux/store';
import { dismissSnackbar } from '../../redux/uiSlice';
import style from './Snackbar.module.scss';

const Transition = (props: SlideProps) => <Slide {...props} direction="down" />;

const Snackbar = () => {
  const { showSnackbar, snackbar } = useSelector((rootState: RootState) => rootState.ui);
  const dispatch = useDispatch();

  const onClose = (event: Event | SyntheticEvent, reason: SnackbarCloseReason) => {
    if (reason === 'clickaway') return;
    dispatch(dismissSnackbar());
  };

  return (
    <MuiSnackbar
      open={showSnackbar}
      autoHideDuration={4000}
      onClose={onClose}
      classes={{ root: style.override }}
      TransitionComponent={Transition}
    >
      <div className={classNames(style.snackbar, style[snackbar.severity ?? 'notify'])}>
        {snackbar.message}
      </div>
    </MuiSnackbar>
  );
};

export default Snackbar;
